<template>
  <div class="br-layout-relative">
    <div class="br-layout-absolute" style="left: 10px; right:10px;height: 40px;line-height: 40px;">
      <div class="br-table-top">
        <div class="br-table-top-item" @click="formDialog=true">
          <div class="icon"><i class="el-icon-plus"></i></div>
          <div class="text">新建</div>
        </div>
      </div>
    </div>
    <div class="br-layout-absolute" style="top:41px;left: 10px; right:10px;">
      <el-table border :data="tableData" v-loading="loading" fit>
        <el-table-column prop="name" label="集群名称" min-width="200">
          <template slot-scope="scope">
            <span :title="scope.row.name" class="br-text-over">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="base_port" label="端口号" min-width="150">
        </el-table-column>
        <el-table-column prop="sockets_buffer_size" label="缓存大小" width="150">
        </el-table-column>
        <el-table-column prop="sockets_flush_interval" label="刷新时间" width="150">
        </el-table-column>
        <el-table-column prop="sockets_compressed" label="开启数据压缩" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.sockets_compressed===0?'否':'是'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dynamic" label="开启动态集群" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.dynamic===0?'否':'是'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="180">
          <template slot-scope="scope">
            <span class="br-table-tools">
              <span class="text" @click="formDialog=true;clusterForm=scope.row;">编辑</span>
              <span class="text" @click="remove(scope.row)">删除</span>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog class="formDialog" :title="clusterForm.id?'编辑':'新建'" :destroy-on-close="true" v-if="formDialog"
      :visible.sync="formDialog" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :show-close="false"
      center>
      <el-form ref="clusterForm" :model="clusterForm" size="mini" :rules="rules" label-width="110px" label-position="left"
        v-loading="dialogLoading">
        <el-form-item label="集群名称" class="br-form-item" prop="name">
          <span slot="label" class="br-form-text">集群名称</span>
          <el-input v-model="clusterForm.name" placeholder="集群名称"></el-input>
        </el-form-item>
        <el-form-item label="端口号" class="br-form-item" prop="base_port">
          <span slot="label" class="br-form-text">端口号</span>
          <el-input v-model="clusterForm.base_port" placeholder="端口号"></el-input>
        </el-form-item>
        <el-form-item label="缓存大小" class="br-form-item" prop="sockets_buffer_size">
          <span slot="label" class="br-form-text">缓存大小</span>
          <el-input v-model="clusterForm.sockets_buffer_size" placeholder="sockets缓存大小"></el-input>
        </el-form-item>
        <el-form-item label="刷新间隔" class="br-form-item" prop="sockets_flush_interval">
          <span slot="label" class="br-form-text">刷新间隔</span>
          <el-input v-model="clusterForm.sockets_flush_interval" placeholder="sockets刷新间隔"></el-input>
        </el-form-item>
        <el-form-item label="开启数据压缩" class="br-form-item" prop="sockets_compressed">
          <span slot="label" class="br-form-text">开启数据压缩</span>
          <el-checkbox v-model="clusterForm.sockets_compressed" :true-label="1" :false-label="0"></el-checkbox>
        </el-form-item>
        <el-form-item label="开启动态集群" class="br-form-item" prop="dynamic">
          <span slot="label" class="br-form-text">开启动态集群</span>
          <el-checkbox v-model="clusterForm.dynamic" :true-label="1" :false-label="0"></el-checkbox>
        </el-form-item>
        <el-form-item label="集群结构" class="br-form-item" style="width: 100%;">
          <span slot="label" class="br-form-text">集群结构</span>
          <el-transfer :titles="['未分配', '已分配']" v-model="clusterForm.slaveList" :props="{key: 'id',label: 'name'}"
            :data="slaveList"></el-transfer>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="mini" @click="clear">取 消</el-button>
        <el-button type="primary"  size="mini" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getClusterList,
    remove,
    save
  } from '@/api/cluster/cluster'
  import {
    getSlaveList
  } from '@/api/slave/slave'
  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        loading: false,
        dialogLoading: false,
        tableData: [],
        formDialog: false,
        rules: {
          name: [{
            required: true,
            message: '请输入集群名称',
            trigger: 'blur'
          }],
          base_port: [{
            required: true,
            message: '请输入端口号',
            trigger: 'blur'
          }],
          port: [{
            required: true,
            message: '请输入端口号',
            trigger: 'blur'
          }],
          sockets_buffer_size: [{
            required: true,
            message: '请输入缓存大小',
            trigger: 'blur'
          }],
          sockets_flush_interval: [{
            required: true,
            message: '请输入刷新间隔',
            trigger: 'blur'
          }]
        },
        clusterForm: {
          id: '',
          name: '',
          base_port: "40000",
          sockets_buffer_size: "2000",
          sockets_flush_interval: "5000",
          sockets_compressed: 1,
          dynamic: 0,
          slaveList: []
        },
        slaveList: []
      }
    },
    computed: {
      ...mapGetters(['sidebar']),
      isHeight() {
        return this.sidebar.height;
      }
    },
    methods: {
      getClusterList() {
        this.loading = true;
        getClusterList().then((res) => {
          this.loading = false;
          if (res.data.status == 200) {
            this.tableData = res.data.data;
            if (this.tableData && this.tableData.length) {
              for (let i = 0; i < this.tableData.length; i++) {
                let slaveList = this.tableData[i].slaveList;
                let arr = [];
                if (slaveList && slaveList.length) {
                  for (let j = 0; j < slaveList.length; j++) {
                    arr.push(slaveList[j].id);
                  }
                  this.tableData[i].slaveList = arr;
                }
              }
            }
          }
        })
      },
      clear() {
        this.formDialog = false;
        this.clusterForm = {
          id: '',
          name: '',
          base_port: "40000",
          sockets_buffer_size: "2000",
          sockets_flush_interval: "5000",
          sockets_compressed: 1,
          dynamic: 0,
          slaveList: []
        };
      },
      save() {
        this.$refs["clusterForm"].validate((valid) => {
          if (valid) {
            this.dialogLoading = true;
            let arr = [];
            let slaveList = this.clusterForm.slaveList;
            if (slaveList && slaveList.length) {
              for (let i = 0; i < slaveList.length; i++) {
                for (let j = 0; j < this.slaveList.length; j++) {
                  if (slaveList[i] === this.slaveList[j].id) {
                    arr.push(this.slaveList[j]);
                  }
                }
              }
            }
            this.clusterForm.slaveList = arr;
            save(this.clusterForm).then((res) => {
              this.dialogLoading = false;
              if (res.data.status == 200) {
                this.clear();
                this.getClusterList();
              }
            })
          }
        });
      },
      remove(cluster) {
        this.$confirm('确定删除此集群数据吗？', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(_ => {
            remove(cluster.id).then((res) => {
              if (res.data.status == 200) {
                this.getClusterList();
              }
            })
          })
          .catch(_ => {
            return;
          });
      },
      getSlaveList() {
        this.loading = true;
        getSlaveList().then((res) => {
          this.loading = false;
          if (res.data.status == 200) {
            this.slaveList = res.data.data;
          }
        })
      },
    },
    created() {},
    mounted() {
      this.getClusterList();
      this.getSlaveList();
    }
  };
</script>

<style lang="less" scoped>
  .formDialog {
    /deep/ .el-dialog {
      width: 850px;
      height: 650px
    }
  }

  /deep/ .el-transfer__buttons {
    padding: 0 10px;

    .el-button {
      height: unset;
    }
  }
</style>
